<template>
    <!-- html模板中操作数据不用 .value -->
   <h5>{{ count }}</h5>  
 <button @click="updateCount">更新数据</button>
</template>
<script lang="ts">
import { defineComponent} from 'vue';
import { ref } from 'vue';
export default defineComponent({
  name: 'RefStudy',
  
  // 需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生变化
  // vue2方式实现
  // data(){
  //   return{count:0}
  // },
  // methods:{
  //   updateCount(){
  //     this.count++
  //   }
  // }
  // vue3方式实现
  // setup时组合API的入口函数(程序一运行会先进入到setup中)
  setup(){
    // let count=0  //变量   此时数据不是响应式
    const count=ref(0)
    function updateCount(){
      // count++  //报错  这里count是ref对象,对象不能++
      count.value++  //js中操作数据 需要用const的值.value
    }
    // 内部返回的是一个对象
    return{
      count,  //属性
      updateCount   //方法
    }
  }
});
</script>

<style>

</style>
